<!--
 * @Author: yanjikun
 * @Date: 2021-06-18 14:52:22
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-27 15:40:23
 * @Description: file content
-->
<template>
  <template v-if="!menuInfo.meta?.hidden">
    <template v-if="menuInfo.children?.length">
      <Menu.SubMenu :key="menuInfo.name" v-bind="$attrs">
        <template #title>
          <span>
            <IconFont :type="(menuInfo.meta?.icon as string)"></IconFont>
            <span>{{ menuInfo.meta?.title }}</span>
          </span>
        </template>
        <template v-for="item in menuInfo.children" :key="item.name">
          <template v-if="!item.children">
            <Menu.Item :key="item.name">
              <span>
                {{ item.meta?.title }}
              </span>
            </Menu.Item>
          </template>
          <template v-else>
            <MenuItem :menu-info="item" :key="item.name"></MenuItem>
          </template>
        </template>
      </Menu.SubMenu>
    </template>
    <Menu.Item v-else :key="menuInfo.name">
      <span>{{ menuInfo.meta?.title }}</span>
    </Menu.Item>
  </template>
</template>

<script setup lang="ts">
  import { Menu } from 'ant-design-vue'
  import { PropType } from 'vue'
  import MenuItem from './menu-item.vue'
  import IconFont from '@/components/IconFont'
  import { RouteRecordRaw } from 'vue-router'
  defineProps({
    menuInfo: {
      type: Object as PropType<RouteRecordRaw>,
      required: true,
      default: () => ({}),
    },
  })
  defineOptions({
    name: 'MenuItem',
  })
</script>

<style lang="less" scoped></style>
